import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex); //把vuex注入到所有的子组件
import * as api from "../api";
import allRoutes from "../router/allRoutes"; //引入所有的路由配置
import dynamicRoutes from "@/router/dynamicRoutes"; //动态路由
import recursionRoutes from "@/utils/recursionRoutes"; //递归计算用户路由的方法
import router from "../router";
import { Dialog } from "element-ui";

let userInfo = localStorage.getItem("qf-userInfo") || "{}";
export default new Vuex.Store({
  //strict:true,//只是警告一下不要在mutation以外的处理函数中修改state
  //vuex的五大核心
  state: {
    userInfo: JSON.parse(userInfo), //用户信息
    sideMenu: [], //侧边栏菜单
    breadCrumb: [], //面包屑数据,
    dialogVisible: false,
    dialogTitle: "增加学员信息", //控制dialog的标题
    stuDate: [],
    loading: true,
    currentRow: {},
    stuTotal: 0,
    stuPageSize: 10,
    //vip订单数据
    orderData: []
  }, //状态
  // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  //由一个类型type对应一个处理函数handle
  //一般定义mutation类型的时候都会大写
  //mutation会接收state作为参数,还可以接收payload作为荷载内容
  //mutation其实不是唯一方式,有很多种方式都可以修改state,比如getters中 比如直接修改 比如action中都可以直接修改,但是我们不要这样做,因为这些修改都是不符合vuex设计原则的
  //一个约定就是,修改state,必须通过mutations来进行更改
  //mutation中的逻辑都是同步的,如果在mutations中编写异步逻辑,视图是可以响应的,但是调试工具无法检测状态的变化
  mutations: {
    //显示loading
    SHOW_LOADING(state) {
      state.loading = true;
    },
    HIDE_LOADING(state) {
      state.loading = false;
    },
    SET_STU_DATA(state, payload) {
      //设置学员表格中的数据
      state.stuDate = payload.data;
      state.loading = false;
      state.stuTotal = payload.total;
    },
    SHOW_DIALOG(state) {
      //显示dialog
      state.dialogVisible = true;
    },
    HIDE_DIALOG(state) {
      //隐藏dialog
      state.dialogVisible = false;
    },
    CHANGE_DIALOG_TITLE(state, payload) {
      //修改标题信息
      state.dialogTitle = payload;
    },
    //保存用户信息
    SET_USER_INFO(state, payload) {
      //设置用户信息
      state.userInfo = payload;
      console.log(state.userInfo);
    },
    SET_MENULIST(state, payload) {
      //设置菜单
      // state.sideMenu = payload;
      // console.log(state.sideMenu)
      //将用户路由动态的添加到router的配置routes中
      //将用户路由添加到dynamicRoutes中的"/"路径那个配置中的children属性中
      let target = dynamicRoutes.find((item) => item.path === "/");
      // console.log(target)
      target.children = [...payload, ...target.children];
      //要将用户路由动态的添加到我们的项目之中
      // console.log(dynamicRoutes)
      router.addRoutes(dynamicRoutes);
      //核心方法就是router.addRoutes([])
      state.sideMenu = target.children
    },
    SET_BREADCRUMB(state, payload) {
      //设置面包屑🍞;
      state.breadCrumb = payload;
    },
    SET_CURRENT_ROW(state, payload) {
      state.currentRow = { ...payload };
    },
    SET_ORDER_DATA(state, payload) {
      state.orderData = payload;
    }
  }, //修改状态的方法
  getters: {}, //相当于是vuex中的计算属性
  //和mutations几乎是一样的
  //一个type对应一个处理函数handle
  //接受的参数1.context 2.payload
  //context上下文 包含了state getters commit ...
  //action不能用于直接修改状态,而是用于发送异步请求,提交mutation
  actions: {
    async GET_MENULIST({ commit }) {
      console.log("action执行了");
      //用于获取服务器中当前用户的菜单
      let res = await api.getMenulistApi();
      let { menuList } = res.data;
      //使用recursionRoutes方法,计算出用户的路由,提交给mutation
      let userRoutes = recursionRoutes(menuList, allRoutes);
      commit("SET_MENULIST", userRoutes);
    },
    GET_STULIST({ commit }, payload = {}) {
      //获取学员列表数据
      commit("SHOW_LOADING");
      let { page = 1, count = 8, classes = "" } = payload;
      api.getStudentApi(page, count, classes).then((res) => {
        commit("SET_STU_DATA", res.data);
        // console.log(res.data.data);
      });
    },
    //获取vip订单数据
    GET_ORDER_DATA({ commit }, payload) {
      let order_id = payload || "";
      api.getOrderApi(order_id)
        .then(res => {
          // console.log(res.data)
          if (res.data.state) {
            commit("SET_ORDER_DATA", res.data.data)
          } else {
            this.$message.error("获取订单失败")
          }
        })
    }
  },
  modules: {}, //模块化
});
